<!-- DivComponent.vue -->

<template>
    <div>
        <div v-for="(item, index) in items" :key="index" @click="selectItem(index)">
            <hr class="hr1" v-if="item.id > 1">
            <div class="card">
                <div class="blue"></div>
                <div class="name">{{ item.sname }}</div>
                <div :class="getClass(item.result)">{{item.result}}</div>
                <div class="text">
                    文件号：{{item.fileno}}
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.sid}}
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.grade}}
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.acade}}
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.major}}
                </div>
                <img src="../../../../assets/images/first/role.png" class="role" alt="">
                <img src="../../../../assets/images/first/month.png" class="role2" alt="">
                <img src="../../../../assets/images/first/clock.png" class="role3" alt="">
                <img src="../../../../assets/images/first/four.png" class="role4" alt="">
                <img src="../../../../assets/images/first/five.png" class="role5" alt="">
                <img src="../../../../assets/images/first/six.png" class="role6" alt="">
                <div class="one2">违纪角色：{{item.role}}</div>
                <div class="four2">违纪种类：{{item.kind}}</div>
                <div class="two2">处分期限：{{item.ctime}}天</div>
                <div class="three2">违纪发生时间：{{formatTime(item.htime)}}</div>
                <div class="five2">违纪解除提醒时间：{{formatTime(addDaysToDate(item.itime,item.ctime))}}</div>
                <div class="six2">违纪生效时间：{{formatTime(item.itime)}}</div>
                <div class="right1">录入时间：{{formatTime(item.etime)}}</div>
<!--                <div class="right2">添加人：</div>-->
<!--                <el-button plain class="bbtn1">-->
<!--                    <img src="../../../../assets/images/first/btn1.png" class="custom-icon" alt="Search Icon" />-->
<!--                    <span class="button-text">编辑</span>-->
<!--                </el-button>-->
                <el-button plain class="bbtn2" @click="showDialog2 = true">
                    <img src="../../../../assets/images/first/btn2.png" class="custom-icon" alt="Search Icon" />
                    <span class="button-text">延长违纪期限</span>
                </el-button>
                <el-dialog :visible.sync="showDialog2" title="延长违纪期限" custom-class="custom-dialog2">
                    <hr class="hr9">
                    <div class="onetext">当前学生姓名：</div>
                    <input type="text" class="custom-inputone" :value="selectedItem.sname" disabled>
                    <div class="twotext">处分结果：</div>
                    <input type="text" class="custom-inputone" :value="selectedItem.result" disabled>
                    <div class="twotext">处分期限：</div>
                    <input type="text" class="custom-inputone" :value="selectedItem.ctime" disabled>
                    <div class="twotext">违纪发生时间：</div>
                    <input type="text" class="custom-inputone" :value="formatTime(selectedItem.htime)" disabled>
                    <div class="twotext">违纪生效时间：</div>
                    <input type="text" class="custom-inputone" :value="formatTime(selectedItem.itime)" disabled>
                    <div class="twotext">处分录入时间：</div>
                    <input type="text" class="custom-inputone" :value="formatTime(selectedItem.etime)" disabled>
                    <div class="twotext">处分解除提醒时间：</div>
                    <input type="text" class="custom-inputone" :value="formatTime(addDaysToDate(selectedItem.itime,selectedItem.ctime))" disabled>
                    <div class="twotext">处分文件号：</div>
                    <input type="text" class="custom-inputone" :value="selectedItem.fileno" disabled>
                    <div class="twotext">延长期限：</div>
                    <el-select v-model="selectedNumber" placeholder="请选择" class="custom-inputone">
                        <el-option
                            v-for="num in numbers"
                            :key="num"
                            :label="num.toString()"
                            :value="num">
                        </el-option>
                    </el-select>
                    <div class="threetext">延长后的处分期限为：{{selectedNumber+item.ctime}}天</div>
                    <div class="fourtext">延长后的处分解除提醒时间为：{{ formatTime(addDaysToDate(addDaysToDate(item.itime,item.ctime),selectedNumber)) }}</div>
                    <hr class="hr9">
                    <span slot="footer" class="dialog-footer">
                            <el-button @click="showDialog2 = false">取消</el-button>
                            <el-button type="primary" @click="lengthen">提交</el-button>
                        </span>
                </el-dialog>
                <el-button plain class="bbtn3" @click="showDialog3 = true">
                    <img src="../../../../assets/images/first/btn3.png" class="custom-icon" alt="Search Icon" />
                    <span class="button-text">解除违纪</span>
                </el-button>
                <el-dialog :visible.sync="showDialog3" title="解除违纪" custom-class="custom-dialog2">
                    <hr class="hr9">
                    <div class="onetext">当前学生姓名：</div>
                    <input type="text" class="custom-inputone" :value="selectedItem.sname" disabled>
                    <div class="twotext">处分结果：</div>
                    <input type="text" class="custom-inputone" :value="selectedItem.result" disabled>
                    <div class="twotext">处分期限：</div>
                    <input type="text" class="custom-inputone" :value="selectedItem.ctime" disabled>
                    <div class="twotext">违纪发生时间：</div>
                    <input type="text" class="custom-inputone" :value="formatTime(selectedItem.htime)" disabled>
                    <div class="twotext">违纪生效时间：</div>
                    <input type="text" class="custom-inputone" :value="formatTime(selectedItem.itime)" disabled>
                    <div class="twotext">处分录入时间：</div>
                    <input type="text" class="custom-inputone" :value="formatTime(selectedItem.etime)" disabled>
                    <div class="twotext">处分解除提醒时间：</div>
                    <input type="text" class="custom-inputone" :value="formatTime(selectedItem.stime)" disabled>
                    <div class="twotext">处分文件号：</div>
                    <input type="text" class="custom-inputone" :value="selectedItem.fileno" disabled>
                    <div class="slovetext">是否解除该生的违纪</div>
                    <hr class="hr9">
                    <span slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="deleteVio">确认</el-button>
                        <el-button @click="showDialog3 = false">取消</el-button>
                        </span>
                </el-dialog>
            </div>
            <hr class="hr1">
        </div>
    </div>
</template>

<script>
import {deleteVio, lengthen} from '../../../../api/api'
import {mapGetters} from 'vuex'

export default {
  name: 'DivComponent',
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      showDialog2: false,
      showDialog3: false,
      selectedNumber: '', // 选择的数字
      numbers: Array.from({ length: 365 }, (_, index) => index + 1),
      selectedItemIndex: 0,
      quary: {
        vioId: '',
        studentId: '',
        violationType: '',
        violationCategory: '',
        happenTime: null,
        effectiveTime: null,
        publishmentDuration: '',
        result: '',
        operatorAid: ''
      }
    }
  },
  computed: {
    ...mapGetters({
      operatorId: 'user/getUserId'
    }),
    selectedItem () {
      return this.items[this.selectedItemIndex] || null // 获取当前选中的项，如果没有选中项则返回 null
    }
  },
  methods: {
    async lengthen () {
      try {
        this.quary.publishmentDuration = this.selectedNumber.toString()
        this.quary.operatorAid = this.operatorId
        this.quary.vioId = this.selectedItem.fileno
        console.log(this.quary)
        const response = await lengthen(this.quary)
        console.log(response.data)
        this.$emit('data-updated')
        this.showDialog2 = false
      } catch (error) {
        console.error('Insert failed:', error)
        this.showDialog2 = true
      }
    },
    async deleteVio () {
      try {
        this.quary.operatorAid = this.operatorId
        this.quary.vioId = this.selectedItem.fileno
        console.log(this.quary)
        const response = await deleteVio(this.quary)
        console.log(response.data)
        this.$emit('data-updated')
        this.showDialog3 = false
        this.$message({
          message: '解除成功',
          type: 'success'
        })
      } catch (error) {
        console.error('Insert failed:', error)
        this.showDialog3 = true
      }
    },
    formatTime (date) {
      if (!date) return '' // 如果没有日期，返回空字符串
      const year = date.getFullYear()
      const month = this.padZero(date.getMonth() + 1)
      const day = this.padZero(date.getDate())
      const hours = this.padZero(date.getHours())
      const minutes = this.padZero(date.getMinutes())
      const seconds = this.padZero(date.getSeconds())
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` // 返回格式化后的日期时间字符串
    },
    addDaysToDate (date, days) {
      const result = new Date(date)
      result.setDate(result.getDate() + days)
      return result
    },
    padZero (value) {
      return value < 10 ? '0' + value : value.toString()
    },
    selectItem (index) {
      this.selectedItemIndex = index
    },
    getClass (result) {
      switch (result) {
        case '记过':
          return 'result'
        case '警告':
          return 'result1'
        case '严重警告':
          return 'result2'
        case '留校察看':
          return 'result3'
        case '记大过':
          return 'result4'
        case '开除学籍':
          return 'result5'
      }
    }
  }
}
</script>

<style scoped src="./div.css">
</style>
